<template>
  <div style="border: 1px solid #ccc; width: 1000px;">
    <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
    />
    <Editor
        style="min-height: 1px; overflow-y: hidden;"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
    />
  </div>
  <br>
  <n-button
    style="width: 64px;"
  >
    重置
  </n-button>
  &nbsp;
  <n-button
      style="width: 64px;"
      type="info"
      @click="handleClick"
  >
    保存
  </n-button>

</template>

<script>
  import '@wangeditor/editor/dist/css/style.css' // 引入 css
  import { onBeforeUnmount, ref, shallowRef } from 'vue'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'


  export default {
    components: { Editor, Toolbar },
    setup() {
      const message = window.$message;

      // 编辑器实例，必须用 shallowRef
      const editorRef = shallowRef()

      // 内容 HTML
      const valueHtml = ref('<p></p>')

      // // 模拟 ajax 异步获取内容
      // onMounted(() => {
      //   setTimeout(() => {
      //     valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
      //   }, 1500)
      // })

      //工具栏的配置
      const toolbarConfig = {
        excludeKeys: [
            'blockquote', // 引用
            '|',
            'group-more-style', //下拉菜单
            'color', //颜色
            'bgColor', //背景色
            '|',
            'fontSize', //字号
            'fontFamily', //字体
            'lineHeight', //行高
            '|',
            'todo', //待办
            'group-justify', //对齐
            'group-indent', //缩进
            'emotion', // 表情
            'group-video', //视频
            'insertTable', //表格
            'codeBlock', //代码块
            'divider', //分割线
            'undo', //后退
            'redo', //还原
            'fullScreen' //全屏
        ]
      }

      //编辑器的配置
      const editorConfig = {
        placeholder: '',
        scroll: false,
      }

      // 组件销毁时，也及时销毁编辑器
      onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor == null) return
        editor.destroy()
      })

      const handleCreated = (editor) => {
        editorRef.value = editor // 记录 editor 实例，重要！
      }

      return {
        editorRef,
        valueHtml,
        mode: 'default', // 或 'simple'
        toolbarConfig,
        editorConfig,
        handleCreated,
        handleClick() {
          message.info("Button Clicked");
        }
      };
    }
  }
</script>

<style>

</style>